<template>
  <div class="content">
    <dc-header :title="'我的'"></dc-header>

    <div class="head-top">
      <mt-cell class="list list-head" to="/selectCompany" isLink>
        <span slot="title" class="al-center" style="padding: 15px 0;">
          <img class="avatar mr15 img-radius"
               :src="userInfo.photo || 'static/icon-user-role.png'"/>
          <div class="list-inline">
            <div class="mint-cell-text">
              {{userInfo.fullname}}
              <span class="tag-admin ml15"
                    v-if="userInfo.roleName">{{userInfo.roleName}}</span>
            </div>
            <div class="mint-cell-label">当前企业:{{store.groupName}}</div>
          </div>
        </span>
        <span  class="mr40">切换企业</span>
      </mt-cell>

      <div class="mt20">
        <dc-cell v-for="(list, index) in lists" :key="list.menuName" :title="list.menuName"
                 :to="list.menuUrl" :leftIcon="list.menuIcon"
                 :leftStyle="{color: colors[index]}"
                 isLink></dc-cell>
      </div>

      <div class="pl50 pr50 mt50">
        <mt-button size="large" type="danger" @click="quit">退出登录</mt-button>
      </div>
    </div>

    <dc-footer></dc-footer>
  </div>
</template>
<script>
  import {mapActions, mapGetters} from 'vuex';
  import header from '@/components/header';
  import footer from '@/components/footer';
  import mintUi from '@/common/mintUi';
  import cell from '@/components/cell';
  import api from '@/common/api/home';
  import logApi from '@/common/api/personal';
  import nativeAction from '@/common/native';
  /**
   * @namespace  components/Test
   * @author ashen
   */
  export default {
    components: {
      'dc-header': header,
      'dc-footer': footer,
      'dc-cell': cell
    },
    data () {
      return {
        colors: ['#FE8A70', '#66CF8E', '#7b78f2', '#FFCA6F', '#76809B', '#6ACFDE', '#6A92DE', '#F15B59', '#8D8BE7'],
        lists: [
          //{menuName: '成员管理', menuIcon: 'icon-person-my', menuUrl: 'membersShip'},
          //{menuName: '目标管理', menuIcon: 'icon-person-target', menuUrl: '/objective'},
          //{menuName: '记账设置', menuIcon: 'icon-person-account', menuUrl: '/accountSet'},
          //{menuName: '业务分析偏好', menuIcon: 'icon-person-analysis', menuUrl: '/analysis'},
          /*{menuName: '升级', menuIcon: 'icon-person-update', menuUrl: '/'},*/
          {menuName: '系统设置', menuIcon: 'icon-person-set', menuUrl: '/setting'}
        ]
      };
    },
    computed: {
        ...mapGetters('login', {
            userInfo: 'userInfo'
        }),
        ...mapGetters('shopAlter', {
            store: 'store'
        })
    },
    activated () {
      api.getMenu(5).then(res => {
        if (res) {
          this.lists = res[0].menus;
        }
      });
    },
    methods: {
      ...mapActions({
        setSignOut: 'setSignOut',
        removeStore: 'removeStore'
      }),
      quit () {
        mintUi.openConfirm('确认退出?').then(() => {
          logApi.logout().then(res => {
            nativeAction.removeLogin();
            this.setSignOut();
            this.removeStore();
            this.$router.push('login');
          });
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../assets/css/variable";
  .list-head{
    height: px2rem(200px);
    .avatar{
      width: px2rem(120px);
      height: px2rem(120px);
    }
    .mint-cell-text{
      font-size: px2rem(40px);
    }
    .tag-admin{
      padding: px2rem(6px) px2rem(10px);
      vertical-align: 3px;
      margin-left: px2rem(10px);
    }
    .mint-cell-label{
      font-size: px2rem(28px);
    }
  }
  .mr40{
    margin-right: px2rem(48px);
  }
  .list-mask {
    height: px2rem(112px);
    .mint-cell-mask {
      display: none !important;
    }
  }
</style>
